<template>
    <div class="bottomViews">
      <div class="topInforViews">
         
         <div class="left-big-title">
             <div class="left-space"></div>
             <span>GMV类别占比</span>
         </div>
        
     </div>
    
     <div id="pie" class="bottom_bar_views"></div>
    </div>
  </template>
  
  <script setup name="pie">
  
  import { getCurrentInstance, proxyRefs, ref } from "vue"
  import { useRouter } from "vue-router"
  import * as echarts from 'echarts'
  import myEventBus from '@/utils/notice'
  const {proxy} = getCurrentInstance()
  const router = useRouter()
  
  const emitter = myEventBus
    var myChart
    emitter.on("resize",(res) =>{
    
        myChart.resize()
    })
  
  
  function showBarEcharts(){
      // 基于准备好的dom，初始化echarts实例
      var chartDom = document.getElementById('pie');
      myChart = echarts.init(chartDom);
      // 指定图表的配置项和数据
      var option;
  
      option = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '2%',
                left: 'right',
                icon:'circle',
                right: 10,
                orient: 'vertical',
                itemWidth: 10,
                itemHeight: 10,
                textStyle: {
                    color: '#D9FFFFFF', // 图例文字的颜色
                    fontSize: 11 // 图例文字的大小
                }
            },
            series: [
                {
                name: 'GMV类别占比',
                type: 'pie',
                radius: ['40%', '70%'],////修改大小
                center: ['40%', '50%'], //修改圆心位置
                avoidLabelOverlap: false,
                // itemStyle: { //设置原点边框样式
                //     normal: {
                //         borderColor: '#0075ff',
                //         borderWidth: 2
                //     }
                // },
                label: {
                    show: true,
                    // position: 'center',
                    formatter(param) {
                    // correct the percentage
                    // return param.value + ' (' + param.percent * 2 + '%)';
                     return param.value+'\n\n' // 加上 \n\n 文字才会显示在指示线的上面
                    },
                    color:'#fff',
                    fontSize: 15,
                    padding:[0,-30,-10,-30],//关键代码！关键代码！关键代码！文字才会显示在指示线的上面

                    
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 30,
                        fontWeight: 'bold',
                        color:'#fff'
                    }
                },
                labelLine: { //指示线长
                    show: true,
                    length:15,//第一段线长
                    length2:30 //第二段线长
                },
                data: [
                    { value: 1048, name: '票据金额' },
                    { value: 935, name: '融资金额' },
                    { value: 580, name: '见证签署金额' },
                    { value: 984, name: '订单金额' }
                ]
                }
            ]
       }
      option && myChart.setOption(option);
  }
  
  
  onMounted(() =>{
      showBarEcharts()
  })
  
  
  
  
  </script>
  
  <style lang="scss" scoped>
  .bottomViews{
      background: url('@/assets/business/top_left.png') no-repeat;
      background-size: 100% 100%;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
  
      .topInforViews{
          height: 50px;
          width: 100%;
          color: #fff;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;
  
          .left-big-title{
              display: flex;
              flex-direction: row;
              align-items: center;
              .left-space{
                  width: 6px;
                  height: 20px;
                  background-color: #fff;
                  margin-right: 5px;
              }
          }
  
          .rigth-money-title{
              display: flex;
              flex-direction: row;
              align-items: center;
              font-size: 12px;
              color: rgba($color: #fff, $alpha: 0.85);
              margin-right: 10px;
              .left-round{
                 width: 8px;
                 height: 8px;
                 background-color: rgba($color: #2276FC, $alpha: 1.0);
                 border-radius: 4px; 
                 margin-right: 5px;
              }
          }
      }
  
  
  
      .bottom_bar_views{
        flex: 1;
        
      }
  
  
      
  }
  </style>
  